import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import F2Canvas from "../F2Canvas";
import F2 from "@antv/f2";

export default ({ data, id, xField, yField, color }) => {
  const [dataList, setDataList] = useState([]);
  const [chartC, setChartC] = useState();
  const initChart = (config) => {
    console.log("config", config);
    const chart = new F2.Chart(
      Object.assign(config, {
        appendPadding: [10, 15, 10, 15],
        // 预留展示tooltip高度
        padding: [40, "auto", "auto"],
      })
    );
    setChartC(chart);

    // Step 2: 载入数据源
    chart.source(dataList, {
      value: {
        tickCount: 5,
        min: 0,
      },
      date: {
        type: "timeCat",
        range: [0, 1],
        tickCount: 3,
      },
    });

    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .line()
      .position(`${xField}*${yField}`)
      .color(color || "#2FC25B");

    // Step 4: 渲染图表
    chart.render();
    return chart;
  };
  useEffect(() => {
    setDataList(data);
  }, [data]);
  console.log("dataListF2Canvas", dataList);
  return (
    <F2Canvas
      id={id}
      style={{ width: "100%", height: "200px" }}
      onInit={initChart}
    ></F2Canvas>
  );
};
